<template>
  <div class="studentProfile">
    <el-container style="margin-top:25px;">
      <el-table :data="tableData" style="width: 100%" height="100%" border>
        <el-table-column prop="sId" label="身份证号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column fixed prop="class" label="班级" width="150">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
        <el-table-column prop="degree" label="学历" width="120">
        </el-table-column>
        <el-table-column prop="productUrl" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="description" label="评价" width="300">
        </el-table-column>
        <el-table-column prop="headimgurl" label="头像" width="300">
        </el-table-column>
        <el-table-column prop="city" label="城市" width="300">
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleAdd"
              >添加</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="修改学员信息"
        :visible.sync="dialog1Visible"
        width="40%"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="SID">
            <el-input v-model="form.sId"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="form.class"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="form.degree"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.productUrl"></el-input>
          </el-form-item>
          <el-form-item label="评价">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="form.headimgurl"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="form.city"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">更新</el-button>
            <el-button @click="dialog1Visible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        title="添加学员信息"
        :visible.sync="dialog2Visible"
        width="40%"
      >
        <el-form ref="add" :model="add" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="add.name"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="add.class"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="add.age"></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="add.degree"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="add.productUrl"></el-input>
          </el-form-item>
          <el-form-item label="评价">
            <el-input v-model="add.description"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="add.headimgurl"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="add.city"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addstu">添加</el-button>
            <el-button @click="dialog2Visible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
//引入actions的辅助函数
import { mapActions } from "vuex";
//引入state的辅助函数
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialog1Visible: false,
      dialog2Visible: false,
      form: {
        sId: "",
        name: "",
        class: "",
        age: "",
        degree: "",
        productUrl: "",
        description: "",
        headimgurl: "",
        city: ""
      },
      add: {
        sId: "",
        name: "",
        class: "",
        age: "",
        degree: "",
        productUrl: "",
        description: "",
        headimgurl: "",
        city: ""
      }
    };
  },
  methods: {
    handleAdd(index, row) {
      this.dialog2Visible = true;
    },
    handleEdit(index, row) {
      this.dialog1Visible = true;
      this.form = Object.assign({}, row);
    },
    handleDelete(index, row) {
      this.$store.dispatch("FETCH_DELSTU", row.sId);
    },
    update() {
      let token = localStorage.getItem("stu-login-token");
      let updateInfo = {
        sId: this.form.sId,
        token: token,
        name: this.form.name,
        age: this.form.age,
        city: this.form.city,
        degree: this.form.degree,
        productUrl: this.form.productUrl,
        description: this.form.description,
        headimgurl: this.form.headimgurl
      };
      this.$store.dispatch("FETCH_UPDATESTU", updateInfo);
      this.dialog1Visible = false;
    },
    addstu() {
      let addinfo = {
        name: this.add.name,
        class: this.add.class,
        age: this.add.age,
        city: this.add.city,
        degree: this.add.degree,
        productUrl: this.add.productUrl,
        description: this.add.description,
        headimgurl: this.add.headimgurl
      };
      this.$store.dispatch("FETCH_ADDSTU", addinfo);
      this.dialog2Visible = false;
    },
    ...mapActions(["FETCH_DELSTU"]),
    ...mapActions(["FETCH_GETSTULIST"])
  },
  computed: {
    ...mapState(["tableData"])
  },
  mounted() {
    this.FETCH_GETSTULIST();
  }
};
</script>
<style>
.studentProfile {
  height: 550px;
}
.el-table .cell {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
